<template>
  <panel type="success" icon="ios-desktop" :title="fullTitle" :enableToggle="false">
    <p>
      <b>服务器所在区域：{{ detail.regionName }}</b>
    </p>
    <p>内网IP地址：{{ detail.innerIP }}</p>
    <p>外网IP地址：{{ detail.outerIP }}</p>
    <p>
      服务器状态：<b :class="status == '正常' ? 'text-success' : 'text-danger'">{{ status }}</b>
    </p>
    <div v-if="searched">
      <p>
        逻辑处理器：<b>{{ flavor.vcpus }} 核</b>
      </p>
      <p>
        内存容量：<b>{{ (flavor.ram || 0) / 1024 }} GB</b>
      </p>
      <p>
        硬盘容量：<b>{{ flavor.disk || '不限制' }}</b>
      </p>
    </div>
    <p v-else>服务器信息查询中...</p>
  </panel>
</template>

<script>
  export default {
    props: {
      detail: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        status: '--',
        flavor: null,
        searched: false,
        flavor: {}
      };
    },
    computed: {
      fullTitle() {
        return `【${this.detail.describle}】${this.detail.name}`;
      }
    },
    mounted() {
      this.$http.get(`/api/hwcloud/ecs/status/${this.detail.id}`).then(res => {
        this.searched = true;
        this.status = res.server.status == 'ACTIVE' ? '正常' : '异常';

        this.$http.get(`/api/hwcloud/ecs/${this.detail.id}/detail/${res.server.flavor.id}`).then(res2 => {
          this.flavor = res2.flavor;
        });
      });
    }
  };
</script>

<style lang="less" scoped>
  .ivu-card-body {
    p {
      line-height: 26px;
    }
  }
</style>
